<template>
	<view class="wrap">
		<!-- 方法一：通过邮箱验证码进行找回密码 -->
		<view class="text_1">
			<text>通过邮箱验证码进行找回密码</text>
		</view>
		<view class="form-input">
			<u-input v-model="email" type="text" :border="border" placeholder="请输入邮箱" />
		</view>
		<view class="code-view form-input">
			<u-input v-model="code" type="text" :border="border" placeholder="请输入验证码" class="code-input"/>
			<u-button type="info" :custom-style="{border:'none'}" :hair-line='false' v-if="!codeDown" :disabled="disabled" @click="codeCheck()">验证码</u-button>
			<u-button type="info" :custom-style="{border:'none'}" :hair-line='false' v-else>已发送({{codeDown}})s</u-button>
		</view>
		<view class="form-input">
			<u-input v-model="password" :type="type" :border="border" :password-icon="passwordIcon" placeholder="请输入新密码" />
		</view>
		<view class="form-input">
			<u-input v-model="confirmPassword" :type="type" :border="border" :password-icon="passwordIcon"
				placeholder="请确认新密码" />
		</view>
		<!-- <u-button shape="square" @click="codeCheck()">点击获取邮箱验证码</u-button> -->
		<u-button shape="square" @click="confirmCheck()" :custom-style="{border:'none'}" :hair-line='false' :disabled="formRight==true" >确认修改</u-button>
		<statement :text="text"></statement>
	</view>
</template>

<script>
	// 导入协议组件
	import statement from '../../commponts/statement.vue'
	export default {
		components:{
			statement
		},
		data() {
			return {
				email: '',
				code: '',
				passwordIcon: true,
				border: true,
				email_2: '',
				disabled: true,
				disabled_1: true,
				type: 'password',
				passwordIcon: true,
				border: true,
				password: '',
				confirmPassword: '',
				codeDown:0,
				disabled:true,
				confirmDisabled:true,
				text:'找回密码代表同意'
			};
		},
		
		watch:{
			email(newValue,oldValue){
				if(this.$u.test.email(this.email)){
							this.disabled=false
						}else{
							this.disabled=true
						}
			}
		},
		computed:{
			formRight(){
				return !this.email || !this.code || !this.password || !this.confirmPassword
			}
		},
		onLoad() {

		},
		methods: {
			// 邮箱验证码验证
			async codeCheck() {
				const checkEmail = {
					email: this.email
				}
				await this.$u.post('/api/auth/reset/password/email/code', checkEmail).then(res => {
					console.log(res)
					if(this.$u.test.email(this.email)){
						this.codeDown=60;
						uni.showToast({
							title:'验证码发送成功',
							icon:'success'
						})
						this.intervalId=setInterval(()=>{
							this.codeDown--;
							if(this.codeDown===0){
								clearInterval(this.intervalId)
							}else{
								// this.$u.toast('倒计时结束后再发送')
							}
						},1000)
					}
				}).catch(err => {
					console.log(err)
				})
			},
			async confirmCheck() {
				// if(!this.email || !this.code || !this.password || !this.confirmPassword){
				// 	this.confirmDisabled=false;
				// 	this.$u.toast('表单项不能为空')
				// }else{
				// 	this.confirmDisabled=true
				// }
				const params = {
					code: this.code,
					email: this.email,
					password: this.password,
					password_confirmation: this.confirmPassword
				}
				await this.$u.post('/api/auth/reset/password/email', params).then(res => {
					// console.log(res);
					uni.showToast({
						title:'重置密码成功',
						icon:'success'
					})
					setTimeout(res => {
						this.$u.route('/pages/auth/loginIn')
					}, 1000)
				}).catch(err => {
					console.log(err)
				})
			},
		}
	};
</script>

<style lang="scss" scoped>
	.form-input{
		padding-bottom: 40rpx;
	}
	.code-view{
		display: flex;
	}
	.emailRight{
		background-color: pink;
	}
	.u-field{
		border-color: rgb(220, 223, 230) !important;
		text-align: left !important;
	}
	.wrap {
		padding: 40rpx;
	}

	.text_1 {
		text-align: center;
		// color: #cccccc;
		padding: 40rpx 0;
	}

	.u-input {
		margin-bottom: 40rpx;
	}

	.u-btn {
		background-color: #ff9900;
		border: 1px solid white !important;
		// color: white;
	}

	uni-button[disabled]:not([type]),
	uni-button[disabled][type="default"] {
		background-color: #fdf3d0 !important;
	}
	
</style>
